<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/init.css" rel="stylesheet">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 50px;
            padding-bottom: 20px;
        }

        .news_tag_root {
            color: #d4d4d4;
            background-color: #b92c28;
            height: auto;
        }

        .news_content_root {
            background-color: #2b542c;
            height: 500px;
        }

        .news_right_root {
            background: #122b40;
            height: 500px;
        }
        .login_root{
            margin-top: 20px;
            height: 200px;
            background: #8c8c8c;
        }
        .day_news_sty{
            margin-top: 20px;
            height: 200px;
            background: #d4d4d4;
        }
        .panel_customer{
            margin-top: 5px;
            margin-bottom: 3px;
        }
        #img_flow{
            height: 300px;
            background: #5cb85c;
        }

    </style>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">news_web</a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <!--左边导航栏-->
        <div class="col-md-2  news_tag_root">
            <ul class="nav nav-pills nav-stacked">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </div>
        <!--中间新闻内容-->
        <div class="col-md-7 news_content_root">

            <div id="img_flow">

            </div>
            <div class="panel panel-default panel_customer">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-default panel_customer">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <!--右边新闻碎片-->
        <div class="col-md-3 news_right_root">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                <button class="btn btn-default" type="button">搜索</button>
                </span>
            </div><!-- /input-group -->
            <div id="login" class="login_root">登录</div>
            <div id="day_news" class="day_news_sty">24小时热闻</div>
        </div>
    </div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="./js/jquery-3.3.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="./js/bootstrap.min.js"></script>
</body>
</html>